<!--文件上传表格显示组件,使用示例<AntTableUpload ref="upload"  :data="{tableName:'sys_file'}" :fileIds="fileId" @uploadChange="uploadChange"></AntTableUpload>-->
<template>
  <AntSpin ref="cspin">
    <AntCard>
      <AntContainer>
        <template slot="top" v-if="topShow">
          <AntForm ref="conditionForm">
            <AntHeaderToolbar :condition-visible="false">
              <template slot="buttons">
                <AntUpload
                    @change="uploadChange"
                    action="/file/upload"
                    :multiple="multiple"
                    v-show="btnShow"
                    :data="data"
                >
                  <AntButton type="primary" :disabled="buttonDisabled">
                    <a-icon type="upload"/>
                    {{ buttonName }}
                  </AntButton>
                </AntUpload>
              </template>
              <template slot="rightButtons">
                <AntTableSettingTool ref="tableParamButtons"></AntTableSettingTool>
              </template>
            </AntHeaderToolbar>
          </AntForm>
        </template>
        <template slot="bottom">
          <AntTable
              ref="attachTable"
              :table-title="mainColumns"
              :autoLoad="false"
              :pageable="false"
              url="/file/list"
              :tableShowSetting="!tableShowSetting"
              @tableLoadingReady="(tableThis) => {tableShowSetting ? this.$refs.tableParamButtons.showButtons(tableThis) : ''}"
          >
            <!-- 自定义内容列演示 -->
            <template v-slot:action="info">
              <a @click="filePreview(info.row)">预览</a>
              <a-divider type="vertical"/>
              <a @click="attachDown(info.row)">下载</a>
              <a-divider type="vertical" v-show="btnShow"/>
              <a-popconfirm v-show="btnShow" title="确定删除吗?" @confirm="() => deleteFile(info.row)">
                <a :disabled="!isDelete">删除</a>
              </a-popconfirm>
            </template>
          </AntTable>
        </template>
      </AntContainer>
    </AntCard>
  </Antspin>
</template>

<script>
export default {
  mixins: [],
  name: 'AntTableUpload',
  components: {},
  props: {
    /**
     * 按钮名称
     */
    buttonName: {
      type: String,
      default: '上传'
    },
    /**
     * 按钮是否禁用
     */
    buttonDisabled: {
      type: Boolean,
      default: false
    },
    /**
     * 上传按钮是否显示
     */
    btnShow: {
      type: Boolean,
      default: true
    },
    /**
     * 附件上传时需要传递到后台的参数
     */
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    /**
     * 该业务已上传的附件文件id,逗号分隔
     */
    fileIds: {
      type: String,
      default: ''
    },
    /**
     * 是否显示顶部上传按钮区域
     */
    topShow: {
      type: Boolean,
      default: true
    },
    /**
     * 附件id字段是否显示
     */
    fileIdShow: {
      type: Boolean,
      default: true
    },
    /**
     * 是否允许上传
     */
    allow: {
      type: Boolean,
      default: true
    },
    /**
     * 允许上传的文件后缀
     */
    accept: {
      type: String,
      default: '.txt,.xls,.xlsx,.doc,.docx,.pfd,.zip,.ppt,.pptx,.rar,.png,.jpg,.pdf'
    },
    /**
     * 是否多文件上传
     */
    multiple: {
      type: Boolean,
      default: true
    },
    /**
     * 不允许上传的提示
     */
    errMsg: {
      type: String,
      default: '不允许上传'
    },
    /**
     * 是否在上方显示表格设置
     */
    tableShowSetting: {
      type: Boolean,
      default: true
    },
    /**
     * 是否允许删除文件
     */
    isDelete: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示上传成功提示
     */
    showMsg: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      mainColumns: [
        {
          title: '附件id',
          field: 'fileId',
          width: 150,
          hidden: this.fileIdShow
        },
        {
          title: '附件名称',
          field: 'originalName',
          width: 300,
          ellipsis: true
        },
        {
          title: '文件大小',
          field: 'fileSize',
          width: 120
        },
        {
          title: '上传人',
          field: 'createUserId',
          type: 'selector',
          url: '/system/user/allSelect',
          dataTitle: 'label',
          dataValue: 'value',
          width: 100
        },
        {
          title: '上传时间',
          field: 'createTime',
          width: 100
        },
        {
          title: '备注',
          field: 'remark',
          width: 100
        },
        {
          title: '操作',
          name: 'action',
          type: 'custom',
          width: 240
        }
      ],
      selectedRow: null,
      // 保存查询时的参数，用于reload
      parmObj: {}
    }
  },
  watch: {},
  created() {
  },
  mounted() {
    // 如果已有文件数据，加载
    if (this.fileIds && this.fileIds != '' && this.fileIds != null) {
      this.loadData()
    }
  },
  methods: {
    /**
     * 加载文件信息
     */
    loadData() {
      this.$nextTick(() => {
        if (!this.fileIds || this.fileIds == '' || this.fileIds == null) {
          this.$refs.attachTable.setTableData([], 0)
          return
        }
        const param = { ...this.parmObj, fileIds: this.fileIds }
        const that = this
        that.$refs.cspin.show()
        this.$refs.attachTable.load(param, function() {
          that.$refs.cspin.hide()
        })
      })
    },
    /**
     * 上传文件结束后
     */
    uploadChange(obj) {
      // 上传完成（固定写法）
      if (obj.file.status === 'done' && obj.file.response.code === 200) {
        if (this.showMsg) {
          this.$message.success(obj.file.response.msg)
        }
        this.$refs.attachTable.addRow(obj.file.response.data)
        this.$emit('uploadChange', this.getFileIds())
      } else if (obj.file.status === 'done' && obj.file.response.success === false) {
        this.$message.error(obj.file.response.msg)
      }
    },
    /**
     *获取所有附件id，用逗号分隔,父组件如果需要则调用
     */
    getFileIds() {
      const arr = this.$refs.attachTable.getTableData()
      let idStr = ''
      for (let i = 0; i < arr.length; i++) {
        const obj = arr[i]
        idStr += obj.fileId + ','
      }
      if (idStr.length > 0) {
        idStr = idStr.substring(0, idStr.length - 1)
      }
      return idStr
    },
    /**
     * 获取所有附件数据，父组件如果需要则调用
     */
    getTableData() {
      return this.$refs.attachTable.getTableData()
    },
    /**
     * 删除附件
     */
    deleteFile(row) {
      if (row.fileId === undefined || row.fileId == null || row.fileId === '') {
        this.$refs.attachTable.deleteRow(row)
      } else {
        this.$refs.cspin.show()
        this.$deleteAction(`/file/deleteByFileId`, { fileIds: row.fileId }).then((res) => {
          if (this.showMsg) {
            this.$message.success('删除成功')
          }
          this.$refs.attachTable.deleteRow(row)
          this.$emit('uploadChange', this.getFileIds())
        }).finally(() => {
          this.$refs.cspin.hide()
        })
      }
    },
    /**
     * 附件预览
     * @param row
     */
    filePreview(row) {
      if (!row.fileId) {
        this.$message.warning('附件未保存，无法预览')
        return
      }
      this.$downloadAction(`/file/preViewFileByFileId`, { fileId: row.fileId }, null,"get",true)
    },
    /**
     * 附件下载
     * @param row
     */
    attachDown: function(row) {
      if (!row.fileId) {
        this.$message.warning('附件未保存，无法下载')
        return
      }
      this.$downloadAction(`/file/downloadByFileId`, { fileId: row.fileId }, row.originalName,"get")
    }
  }
}
</script>
<style lang="less" scoped>
::v-deep .c-content-layout-top {
  margin: 0px !important;
}

::v-deep .c-content-layout-bottom {
  padding: 0px !important;
}
</style>
